<template>
  <div class="xinli-test">
    <div class="main-title">
      <span class="xinli-answer">心理测试</span>
      <span class="sub-title">认识自己·了解他人</span>
    </div>
    <div class="content">
      <Show v-for="(test, i) in testList" :key="i" class="show" :test="test" />
    </div>
  </div>
</template>

<script>
import Show from '../show.vue'
import { findTestList } from '@/api/test'
export default {
  components: { Show },
  data() {
    return {
      testList: []
    }
  },
  mounted() {
    this.getTestList()
  },
  methods: {
    getTestList() {
      findTestList({ name: null }).then(res => {
        this.testList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.xinli-test {
    height: 600px;
    background: #fff;
    margin-bottom: 35px;
    margin-top: 50px;
    cursor: pointer;
}
.main-title {
    margin-bottom: 20px;
}
.xinli-answer {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #0b8bff;
    line-height: 28px;
    margin-right: 14px;
}
.sub-title {
    font-size: 16px;
    color: #999;
    line-height: 18px;
}
.content {
    height: 540px;
    width: 980px;
    position: relative;
}
</style>
